<template>
  <div class="head-container">
    <!-- 搜索 -->
    <el-input v-model="query.refeName" clearable placeholder="服务商" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
    <el-date-picker
      v-model="query.startTime"
      clearable
      style="width: 200px"
      class="filter-item"
      placeholder="开始时间"
      type="date"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      @change="startTimeChange"
    />
    <el-date-picker
      v-model="query.endTime"
      clearable
      class="filter-item"
      style="width: 200px"
      placeholder="结束时间"
      type="date"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      @change="endTimeChange"
    />
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <!-- 导出 -->
    <div style="display: inline-block;margin: 0px 2px;">
      <el-button
        :loading="downloadLoading"
        size="mini"
        class="filter-item"
        type="warning"
        icon="el-icon-download"
        @click="download"
      >
        导出
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // -----------------
      startTime: '',
      endTime: '',
      startTimeConfig: {},
      endTimeConfig: {},
      downloadLoading: false
    }
  },
  mounted() {
    this.initTimeConfig()
  },
  methods: {
    toQuery() {
      this.$parent.page = 0
      this.$parent.init()
    },
    // 日期S
    initTimeConfig() {
      const self = this
      // 开始时间配置
      this.startTimeConfig = {
        disabledDate(time) {
          if (self.endTime) {
            return time.getTime() > new Date(self.endTime).getTime()
          }
          return true
        }
      }
      // 结束时间配置
      this.endTimeConfig = {
        disabledDate(time) {
          if (self.startTime) {
            return time.getTime() < new Date(self.startTime).getTime()
          }
          return true
        }
      }
    },
    startTimeChange(val) {
      this.startTime = val
    },
    endTimeChange(val) {
      this.endTime = val
    },
    // --------------------------
    download() {
      this.$parent.exportExcel()
    }
  }
}
</script>
